<template>
    <div class="Uploader">
        <input type="file" accept="image/*" @change="onFileChange" style="display: none;" ref="fileInput" />
        <button @click="uploadImage">上传图片</button>
        <span v-if="selectedFileName">{{ selectedFileName }}</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            businessOwner: {},
            //selectedFile: null,
            selectedFileName: '',
        };
    },
    methods: {
        uploadImage() {
            this.$refs.fileInput.click(); // 模拟点击文件输入
        },
        onFileChange(event) {
            const file = event.target.files[0];
            if (file) {
                this.businessOwner.businessOwnImg = file;
                this.selectedFileName = file.name; // 显示文件名
                // 这里可以添加上传逻辑，例如使用 FormData 上传到服务器
                this.uploadToServer(file);
            }
        },
        uploadToServer(file) {
            const formData = new FormData();
            formData.append('image', file);

            // 示例：使用 Fetch API 上传文件
            fetch('YOUR_UPLOAD_ENDPOINT', {
                method: 'POST',
                body: formData,
            })
                .then(response => response.json())
                .then(data => {
                    console.log('上传成功:', data);
                })
                .catch(error => {
                    console.error('上传失败:', error);
                });
        },
    },
};
</script>

<style scoped>
.uploader {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
}

.upload-button {
    margin-right: 10px;
    /* 按钮与文本之间的间距 */
    padding: 8px 12px;
    /* 按钮内边距 */
    cursor: pointer;
    /* 鼠标悬停时显示手型 */
    background-color: #42b983;
    /* 按钮背景色 */
    color: white;
    /* 按钮文本颜色 */
    border: none;
    /* 去除默认边框 */
    border-radius: 4px;
    /* 按钮圆角 */
    transition: background-color 0.3s;
    /* 背景色过渡效果 */
}

.upload-button:hover {
    background-color: #358a6b;
    /* 悬停时按钮背景色变化 */
}

.file-name {
    font-size: 3vw;
    /* 文件名文本大小 */
    color: #4f4e4e;
    /* 文件名文本颜色 */
}

.Uploader {
    font-size: 3vw;
}
</style>